<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>交易记录 - 外咖后台</title>
		<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/static/css/jquery.typeahead.css" />
		<link rel="stylesheet" href="/static/layui/css/layui.css" />
		<link rel="stylesheet" href="/static/css/transactionRecord.css" />
	</head>

	<body class="layui-anim layui-anim-scale">
		<div style="padding: 3%;" class="layui-form">
			<div class="layui-row">
				<div class="layui-col-md7" id="title-top" style="padding-left: 18%;">交易记录</div>
				<div class="layui-col-md5">
					<div style="width: 34%;" class="layui-inline">
						<select id="type" lay-filter="type">
							<option value="">请选择交易类型</option>
							<option value="0">充值记录</option>
							<option value="1">消费记录</option>
							<option value="2">退款记录</option>
						</select>
					</div>
					<div class="typeahead__container layui-inline">
						<div class="typeahead__field">
							<span class="typeahead__query">
								<input class="js-typeahead" id="searchBox" style="border-right: none;" 
									placeholder="请输入订单号" autocomplete="off">
								<button id="searchBtn">
									<span class="typeahead__search-icon" style="margin-left: -5px;"></span>
								</button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-anim layui-anim-upbit" style="text-align: center;margin-bottom: 10%;">
			<table class="layui-table" lay-even>
				<thead>
					<tr>
						<td>订单号</td>
						<td>交易类型</td>
						<td>支付方式</td>
						<td>订单金额</td>
						<td>付款状态 / 退款状态</td>
						<td>付款时间 / 退款时间</td>
						<td>订单创建时间</td>
					</tr>
				</thead>
				<tbody id="record-content"></tbody>
			</table>

			<div id="page_info">
				<div id="pagination_overview"></div>
				<div id="page_nav_div" style="float: right; margin-right: 30px;"></div>
			</div>
		</div>

		<script type="text/javascript" src="/static/umeditor/third-party/jquery.min.js"></script>
		<script type="text/javascript" src="/static/js/disable.js"></script>
		<script type="text/javascript" src="/static/js/jquery.typeahead.js"></script>
		<script type="text/javascript" src="/static/layui/layui.all.js"></script>
		<script type="text/javascript" src="/static/js/transactionRecord.js"></script>
	</body>

</html>